<template>
  <div class="login">
    <div class="login_container">
      <div class="title">
        <img src="../../assets/image/logo.png" alt="图标" />
        <h3>星球boke后台管理</h3>
      </div>
      <div class="form">
        <el-form :model="formDate" label-width="70px">
          <el-form-item label="用户名:">
            <el-input v-model="formDate.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input type="password" show-password v-model="formDate.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="验证码:">
            <!-- 验证码 -->
            <div class="captcha">
              <el-input
                v-model="formDate.captcha"
                style="width: 160px"
                placeholder="请输入验证码"
                @keyup.enter="submit"
              ></el-input>
              <div v-html="captcha" class="captcha_img" @click="getLoginCode"></div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit" :loading="loading">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

import { getLoginCodeApi, loginApi } from '@/api'
import useUser from '@/pinia/modules/user'

const useStore = useUser()
const router = useRouter()

const formDate = reactive({
  username: '',
  password: '',
  captcha: ''
})

const captchaKey = ref('') // 验证码key
const captcha = ref('') // 验证码
const loading = ref(false) // 登录按钮loading

// 获得登录验证码
const getLoginCode = () => {
  getLoginCodeApi(captchaKey.value).then((res: any) => {
    captchaKey.value = res.key
    captcha.value = res.svg
  })
}

onMounted(() => {
  getLoginCode()
})

// 点击登录
const submit = () => {
  loading.value = true
  loginApi({ ...formDate, key: captchaKey.value })
    .then((res: any) => {
      useStore.saveUserInfo(res)
      useStore.saveToken(res.token)
      router.push('/home')
    })
    .finally(() => {
      loading.value = false
    })
}
</script>

<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background-image: url(../../assets/image/login-bg.png);
  background-size: cover;

  .login_container {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255);

    .title {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 35px;
        height: 35px;
        margin-right: 15px;
      }

      .h3 {
        font-size: 20px;
        font-weight: 600;
      }
    }

    .form {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 20px;

      .el-form {
        width: 80%;
        .el-form-item {
          width: 100%;
        }
        .captcha {
          display: flex;
          align-items: center;

          .captcha_img {
            margin-left: 15px;
          }
        }
        .el-button {
          width: 80%;
        }
      }

      .btn {
        width: 120px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
